<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva 10,000 Shapes with Tooltips Stress Test Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });

    var circlesLayer = new Konva.Layer();
    var tooltipLayer = new Konva.Layer();
    var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
    var colorIndex = 0;

    for(var i = 0; i < 10000; i++) {
        var color = colors[colorIndex++];
        if(colorIndex >= colors.length) {
            colorIndex = 0;
        }

        var randX = Math.random() * stage.getWidth();
        var randY = Math.random() * stage.getHeight();
        var circle = new Konva.Circle({
            x: randX,
            y: randY,
            radius: 3,
            fill: color,
            name : i.toString()
        });

        circlesLayer.add(circle);
    }

    var tooltip = new Konva.Text({
        text: "",
        fontFamily: "Calibri",
        fontSize: 12,
        padding: 5,
        visible: false,
        fill: "black",
        opacity: 0.75,
        textFill: "white"
    });

    tooltipLayer.add(tooltip);
    stage.add(circlesLayer);
    stage.add(tooltipLayer);

    circlesLayer.on("mousemove", function(e) {
        // update tooltip
        var mousePos = stage.getPointerPosition();
        tooltip.position({
            x : mousePos.x + 5,
            y : mousePos.y + 5
        });
        tooltip.text("node: " + e.target.name() + ", color: " + e.target.fill());
        tooltip.show();
        tooltipLayer.draw();
    });
    circlesLayer.on("mouseout", function() {
        tooltip.hide();
        tooltipLayer.draw();
    });
  </script>

</body>
</html>